/*
 * @Description: 返回导航
 * @Author: kanglin
 * @Date: 2018-06-14 17:55:17
 * @Copyright: Created by Panxsoft.
 */
<style lang="less" scoped rel="stylesheet/less" type="text/less" >
    @import '~src/assets/css/common.less';
    .collection-back{
		position: relative;
		background: #fff;
		height: 80*@rem-per-px;
		z-index: @button-z-idx;
        &::after{
            content: '';
            height: 1px;
            width: 100%;
            background: #ececec;
            display: block;
            transform: scaleY(.5);
        }
        .icon{
            margin-left: 30*@rem-per-px;
            width: 32*@rem-per-px;
            height: 32*@rem-per-px;
            display: inline-block;
            background-image: url('//gz.bcebos.com/v1/beauty-mirror/wx_system/collection/back.png');
            background-repeat: no-repeat;
            background-size: 100%;
            vertical-align: -.2em;
        }
        .name{
            font-size: 16px;
            line-height:  80*@rem-per-px;
            color: #444444;
        }
    }
</style>

<template>
	<div
		class="collection-back"
		@click="handleBack">
		<i class="icon"/>
		<span class="name">
			{{ name }}
		</span>
	</div>
</template>

<script>
export default {
	name: 'Back',
	props: {
		path: {
			type: String,
			default() {
				return '/';
			},
		},
		name: {
			type: String,
			default() {
				return this.$t('collection.user_center');
			},
		},
		query: {
			type: Object,
			default() {
				return {};
			},
		},
	},
	data() {
		return {};
	},
	methods: {
		handleBack() {
			this.$router.replace({ path: this.path, query: this.query });
		},
	},
};
</script>
